<template>
    <view class="page bg-fff">
        <block v-if="scene == 1154">
            <pyq-open-chunk></pyq-open-chunk>
        </block>
        <block v-else>
            <view v-if="tabsList.length > 0">
                <view class="floatWrap bg-fff">
		            <up-tabs :list="tabsList" :current="curr" lineColor="#007235" keyName="title" @click="changePici"></up-tabs>
                    <scroll-view scroll-x class="secTabWrap top-15" v-if="tabsList[curr]?.day_list?.length > 0">
                        <view class="secTabItem right-10" :class="index === currSecTab ? 'bg-theme col-fff' : 'bg-theme-opacity col-grey'" v-for="(secTab, index) in tabsList[curr].day_list" :key="index" @click="changeSecTab(index)">
                            {{ secTab.label }}
                        </view>
                    </scroll-view>
                </view>

                <block v-if="tabsList[curr].list_gongshi.length > 0">
                    <view class="rengouListBox font13 bottom-15">
                        <view class="rengouTitBox font15 top-15 bg-theme-opacity">
                            <text class="fontBold">最新公示({{ tabsList[curr].gong_time }})</text>
                        </view>
                        
                        <view class="tHendBox top-5 bottom-10 flex">
                            <text class="name">项目</text>
                            <view class="price text-center">
                                价格
                                <view class="top-3">元/m²</view>
                            </view>
                            <view class="size text-center">
                                面积
                                <view class="top-3">m²</view>
                            </view>
                            <view class="shebao text-center">
                                社保
                                <view class="top-3">系数</view>
                            </view>
                            <view class="yugu text-center">
                                入围比
                            </view>
                        </view>
                        
                        <block v-for="(prod, index) in tabsList[curr].list_gongshi" :key="index">
                            <view>
                                <view class="tBodyBox flex" @click="toDetail(prod)">
                                    <view class="name titleWrap">
                                        <view class="title fontBold txtHidden">{{prod.title}}</view>
                                        <view class="font10 top-3 txtHidden" v-if="prod.beian_title">(备案名:{{ prod.beian_title }})</view>
                                        <!-- <view class="plateWrap left-3">({{ repliceArea(prod.area) }})</view> -->
                                    </view>
                                    <view class="price text-center">{{ filterPrice(prod.price) }}</view>
                                    <view class="size col-error text-center">{{ repliceSize(prod.size) }}</view>
                                    <view class="shebao text-center">{{prod.bao_ratio?prod.bao_ratio:'--'}}</view>
                                    <view class="yugu text-center">{{prod.ruwei_ratio?prod.ruwei_ratio:'--'}}</view>
                                </view>
                                <view class="timeWrap bg-gray bottom-5 font13 flex" v-if="tabsList[curr].guess">
                                    <view class="time">
                                        认购时间:{{prod.buy_start_time?prod.buy_start_time.substring(0, 10)+'—'+prod.buy_end_time.substring(5, 10) : '--'}}
                                    </view>
                                    <text class="ruWeiPoints">入围分:{{prod.points_state && prod.points_state !== "" ? prod.points_state:'--'}}</text>
                                    <text class="state text-center">{{prod.sell_type}}</text>
                                </view>
                                <view class="piciTimeWrap font13 bg-gray bottom-5 font13 flex" v-else>
                                    <view class="statusRow">{{ prod.sell_type }}<text class="left-3">(入围分:{{ prod.points_state && prod.points_state !== "" ? prod.points_state:'--' }})</text></view>
                                    <view class="groupRow" v-if="prod.buy_group">认购组数{{ formatNumber(prod.buy_group) }}</view>
                                    <view class="buyRow" v-if="prod.buy_ratio">认购率{{prod.buy_ratio?prod.buy_ratio+'%':'--'}}</view>
                                </view>
                            </view>
                        </block>
                    </view>
                </block>
                
                <block v-if="tabsList[curr].list_end.length > 0">
                    <view class="rengouListBox font13 bottom-15">
                        <view class="rengouTitBox font15 top-15 bg-theme-opacity">
                            <text class="fontBold">{{tabsList[curr].guess ? '预测项目':'已认购项目'}}</text>
                        </view>
                        
                        <view class="tHendBox top-5 bottom-10 flex">
                            <text class="name">项目</text>
                            <view class="price text-center">
                                价格
                                <view class="top-3">元/m²</view>
                            </view>
                            <view class="size text-center">
                                面积
                                <view class="top-3">m²</view>
                            </view>
                            <view class="shebao text-center">
                                社保
                                <view class="top-3">系数</view>
                            </view>
                            <view class="yugu text-center">
                                入围比
                            </view>
                        </view>
                        
                        <block v-for="(prod, index) in tabsList[curr].list_end" :key="index">
                            <view>
                                <view class="tBodyBox flex" @click="toDetail(prod)">
                                    <view class="name titleWrap">
                                        <view class="title fontBold txtHidden">{{prod.title}}</view>
                                        <view class="font10 top-3 txtHidden" v-if="prod.beian_title">(备案名:{{ prod.beian_title }})</view>
                                        <!-- <view class="plateWrap left-3">({{ repliceArea(prod.area) }})</view> -->
                                    </view>
                                    <view class="price text-center">{{ filterPrice(prod.price) }}</view>
                                    <view class="size col-error text-center">{{ repliceSize(prod.size)}}</view>
                                    <view class="shebao text-center">{{prod.bao_ratio?prod.bao_ratio:'--'}}</view>
                                    <view class="yugu text-center">{{prod.ruwei_ratio?prod.ruwei_ratio:'--'}}</view>
                                </view>
                                <view class="timeWrap bg-gray bottom-5 font13 flex" v-if="tabsList[curr].guess">
                                    <view class="time">
                                        认购时间:{{prod.buy_start_time?prod.buy_start_time.substring(0, 10)+'—'+prod.buy_end_time.substring(5, 10) : '--'}}
                                    </view>
                                    <text class="ruWeiPoints">入围分:{{prod.points_state && prod.points_state !== "" ? prod.points_state:'--'}}</text>
                                    <text class="state text-center">{{prod.sell_type}}</text>
                                </view>
                                <view class="piciTimeWrap font13 bg-gray bottom-5 font13 flex" v-else>
                                    <view class="statusRow">{{ prod.sell_type }}<text class="left-3">(入围分:{{ prod.points_state && prod.points_state !== "" ? prod.points_state:'--' }})</text></view>
                                    <view class="groupRow" v-if="prod.buy_group">认购组数{{ formatNumber(prod.buy_group) }}</view>
                                    <view class="buyRow" v-if="prod.buy_ratio">认购率{{prod.buy_ratio?prod.buy_ratio+'%':'--'}}</view>
                                </view>
                            </view>
                        </block>
                    </view>
                </block>
                
                <block v-if="tabsList[curr].list_before.length > 0">
                    <view class="rengouListBox font13 bottom-15">
                        <block v-if="!tabsList[curr].guess">
                            <view class="rengouTitBox top-15 font15 bg-theme-opacity">
                                <text class="fontBold">{{ tabsList.length > 0 && tabsList[curr].list_gongshi.length > 0 ? '已公示':'' }}待认购项目</text>
                            </view>
                            <view class="tHendBox top-5 bottom-10 flex">
                                <text class="name">项目</text>
                                <view class="price text-center">
                                    价格
                                    <view class="top-3">元/m²</view>
                                </view>
                                <view class="size text-center">
                                    面积
                                    <view class="top-3">m²</view>
                                </view>
                                <view class="shebao text-center">
                                    社保
                                    <view class="top-3">系数</view>
                                </view>
                                <view class="yugu text-center">
                                    入围比
                                </view>
                            </view>
                        </block>
                        
                        <block v-for="(prod, index) in tabsList[curr].list_before" :key="index">
                            <view>
                                <view class="tBodyBox flex" @click="toDetail(prod)">
                                    <view class="name titleWrap">
                                        <view class="title fontBold txtHidden">{{prod.title}}</view>
                                        <view class="font10 top-3 txtHidden" v-if="prod.beian_title">(备案名:{{ prod.beian_title }})</view>
                                        <!-- <view class="plateWrap left-3">({{ repliceArea(prod.area) }})</view> -->
                                    </view>
                                    <view class="price text-center">{{ filterPrice(prod.price) }}</view>
                                    <view class="size col-error text-center">{{ repliceSize(prod.size) }}</view>
                                    <view class="shebao text-center">{{prod.bao_ratio?prod.bao_ratio:'--'}}</view>
                                    <view class="yugu text-center">{{prod.ruwei_ratio?prod.ruwei_ratio:'--'}}</view>
                                </view>
                                <view class="timeWrap bg-gray bottom-5 font13 flex" v-if="tabsList[curr].guess">
                                    <view class="time">
                                        认购时间:{{prod.buy_start_time?prod.buy_start_time.substring(0, 10)+'—'+prod.buy_end_time.substring(5, 10) : '--'}}
                                    </view>
                                    <text class="ruWeiPoints">入围分:{{prod.points_state && prod.points_state !== "" ? prod.points_state:'--'}}</text>
                                    <text class="state text-center">{{prod.sell_type}}</text>
                                </view>

                                <view class="piciTimeWrap font13 bg-gray bottom-5 font13 flex" v-else>
                                    <view class="statusRow">{{ prod.sell_type }}</view>
                                    <view>
                                        认购时间:{{prod.buy_start_time?prod.buy_start_time.substring(0, 10)+'—'+prod.buy_end_time.substring(5, 10) : '--'}}
                                    </view>
                                </view>
                            </view>
                        </block>
                    </view>
                    <view class="empty flex font13 col-grey">暂无更多</view>
                    <up-gap height="40"></up-gap>
                </block>

                <up-empty text="暂无数据" mode="list" marginTop="100" v-if="tabsList[curr]?.list_end.length == 0 && tabsList[curr]?.list_before.length == 0"></up-empty>
            </view>
        </block>
    </view>
</template>

<script>
    import { mapState, mapActions } from 'pinia';
    import { useUserInfoStore, useIndexStore, useConfigStore } from '@/store/index';
    import { getPiCiTab, rengouAllAPI } from '@/common/api/houses';
	export default {
        data() {
            return {
                curr: 0,
                tabsList: [{
                    gong_time: '',
                    list_gongshi: [],
                    list_end:[],
                    list_before: []
                }],
                piciId: '',
                currSecTab: 0
            }
        },
        computed:{
            ...mapState(useUserInfoStore, ['userInfo']),
            ...mapState(useConfigStore, ['scene']),
            ...mapState(useIndexStore, ['nowCityCode'])
        },
        onShareAppMessage(res) {
            return {
                title: `入市项目汇总`,
                path: `/pages/tools/pici/pages?puid=${this.userInfo.id}`,
            }
        },
        onShareTimeline() {
            return {
                title: `入市项目汇总`,
                query: `puid=${this.userInfo.id}`
            }
        },
        onLoad(options){
            const that = this;
            let { puid, piciId } = options;
            if(puid) {
                this.setPuid(puid)
            }
            this.piciId = piciId || '';

            //朋友圈进入小程序快照场景
            if(this.scene == 1154) {
                return
            };
            uni.$check_and_login(function () {
                that.init()
            })
        },
        methods:{
            ...mapActions(useConfigStore, ['setPuid']),

            //初始化
            async init(){
                try {
                    const { status, detail } = await getPiCiTab(this.nowCityCode);
                    if(status !== 0) {
                        uni.$u.toast(detail);
                        return
                    }
                    if(detail.length > 0) {
                        this.tabsList = detail.map(item => ({
                            ...item,
                            gong_time: '',
                            list_gongshi: [],
                            list_end: [],
                            list_before: []
                        }));
                        if(this.piciId) {
                            const findPiCiCurr = detail.findIndex(item => item.id == this.piciId);
                            this.curr = findPiCiCurr !== -1 ? findPiCiCurr : 0;
                        }
                        await this.loadProducts()
                    }
                } catch (error) {}
            },
            
            //根据批次加载数据
            async loadProducts(){
                try {
                    const { status, detail } = await rengouAllAPI({
                        id: this.tabsList[this.curr].value,
                        cityCode: this.nowCityCode,
                        day: this.tabsList[this.curr]?.day_list?.[this.currSecTab]?.value || ''
                    })
                    if(status !== 0) {
                        uni.$u.toast(detail);
                        return
                    }
                    let { buy_list, wait_list, latest_list, gong_time } = detail;
                    this.tabsList[this.curr].gong_time = gong_time;
                    this.tabsList[this.curr].list_gongshi = latest_list;
                    this.tabsList[this.curr].list_before = wait_list;
                    this.tabsList[this.curr].list_end = buy_list;
                } catch (error) {}
            },
            
            //切换批次
            async changePici({index}){
                if(this.curr === index) return;
                this.currSecTab = 0;
                const currTabData = this.tabsList[index];
                this.curr = index;
                if(currTabData.list_gongshi.length === 0 || currTabData.list_before.length === 0 || currTabData.list_end.length === 0) {
                    await this.loadProducts()
                }
            },

            //切换批次内的日期
            async changeSecTab(index){
                this.currSecTab = index;
                const currTabData = this.tabsList[this.curr];
                if(currTabData.list_gongshi.length === 0 || currTabData.list_before.length === 0 || currTabData.list_end.length === 0) {
                    await this.loadProducts()
                }
            },

            repliceArea(data){
                return  data.substring(0, data.length-1).replace(/新/g, '')
            },
            repliceSize(data){
                return data.replace(/㎡|m²/g, '')
            },
            filterPrice(price){
                let priceStr = '';
                if(price[0] === price[1]) {
                    if(price[0] === 0) {
                        priceStr = '--'
                    }else {
                        priceStr = (price[0] / 10000).toFixed(1) + '万'
                    }
                }else {
                    if(price[0] === 0){
                        priceStr = (price[1] / 10000).toFixed(1) + '万'
                    }else if(price[1] === 0) {
                        priceStr = (price[0] / 10000).toFixed(1)+ '万'
                    }else {
                        priceStr = (price[0] / 10000).toFixed(1)+'-'+(price[1] / 10000).toFixed(1)+'万'
                    }
                }
                return priceStr
            },
            formatNumber(num) {
                return num > 0 ? (num>=10?Math.floor(num/10)*10+'+' : '<10') : '--'
            },

            //跳转楼盘详情
            toDetail(info){
                uni.navigateTo({
                    url: `/pages/product/detail/index?productId=${info.product}&puid=${this.puid}&title=${info.title}`
                })
            }
        }
    }
</script>

<style scoped lang="scss">
.border-top-grey{
    border-top: 2rpx solid rgba(0,0,0,.06);
}
.page{
    height: 100vh;
    line-height: 1.2;
    overflow-x: hidden;
    overflow-y: scroll;
    .floatWrap{
        position: sticky;
        top: 0;
        z-index: 99;
        padding: 28rpx 0;
        box-shadow: 0rpx 8rpx 8rpx rgba(0,0,0,.08);
        .secTabWrap{
            white-space: nowrap;
            .secTabItem{
                padding: 8rpx 20rpx;
                display: inline-block;
                &:first-child{
                    margin-left: 28rpx;
                }
            }
        }
    }
    
    .rengouListBox{
        .rengouTitBox{
            padding: 10rpx 28rpx;
        }
        .titleWrap{
            .title{
                max-width: 70%;
            }
            .plateWrap{
                width: 30%
            }
        }
        
        .name{
            width: 38%;
        }
        .price{
            width: 23%;
        }
        .size{
            width: 17%;
        }
        .shebao{
            width: 11%;
        }
        .yugu{
            width: 11%;
        }
        .tHendBox{
            justify-content: space-between;
            padding: 28rpx 28rpx 20rpx 28rpx;
            box-shadow: 0rpx 8rpx 8rpx rgba(0,0,0,.08);
        }
        .tBodyBox{
            position: relative;
            min-height: 70rpx;
            padding: 20rpx 28rpx;
            justify-content: space-between;
            border-bottom: 1rpx solid rgba(0,0,0,.06);
            &:last-child{
                border: none;
            }
        }
        .timeWrap{
            padding: 6rpx 0rpx 10rpx 0rpx;
            .time{
                width: 55%;
                padding-left: 28rpx
            }
            .ruWeiPoints{
                width: 25%;
            }
            .state{
                width: 20%;
            }
        }
        .piciTimeWrap{
            justify-content: flex-start;
            padding: 6rpx 0rpx 10rpx 28rpx;
            .statusRow{
                width: 42%;
            }
            .groupRow{
                width: 30%;
            }
            .buyRow{
                width: 28%;
            }
        }
    }
}
</style>
